<template>
  <div style="display: flex">
    <div style="min-width: 20%;max-height: 500px;overflow:auto;border-right: 5px solid #eeeeee">
      <el-tree :data="data" :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
    </div>
    <el-container>
      <div style="height: 50px;display: flex;margin-left: 20px">
        <el-input
          prefix-icon="el-icon-search"
          placeholder="供应商名称"
          style="width: 200px;text-align: center"
          v-model="productName"
        ></el-input>
        <el-input
          prefix-icon="el-icon-search"
          placeholder="联系电话"
          style="width: 200px;margin-left: 10px;text-align: center"
          v-model="sn"
        ></el-input>
        <div>
          <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" :loading="queryClicked" @click="queryClick">查询
          </el-button>
          <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetClick">
            重置
          </el-button>
        </div>
      </div>
      <div style="padding-left: 20px">
        <el-table
          :data="productData"
          border
          stripe
          :height="curHeight"
          ref="table"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
          @row-dblclick="doubleClick"
          style="width: 100%;">
          <el-table-column
            label="供应商名"
            align="left"
            width="250"
            prop="name"
          >
          </el-table-column>
          <el-table-column
            label="联系电话"
            width="120"
            align="left"
            prop="phone"
          >
          </el-table-column>
          <el-table-column
            label="地址"
            align="center"

          >
            <template slot-scope="{row}">
              <span>{{row.areaName}}{{row.address}}</span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadProduct"></pagination>
      </el-footer>
<!--      <div style="display: flex;justify-content: flex-end;align-items: center">-->
<!--        <el-button type="primary" @click="addClick">完成</el-button>-->
<!--      </div>-->
    </el-container>
  </div>
</template>
<script>
  import {list} from '@/api/supplier'
  import util from '../../utils/utils'
  import {list as supplierCategoryList} from '@/api/supplierCategory'
  import Pagination from '@/components/Pagination';

  export default {
    data() {
      return {
        sn:'',
        productName:'',
        queryClicked:false,
        productData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        productCategory: '',
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        data: [],
        chooseData: [],
        curHeight: null
      }
    },
    components: {Pagination},
    created() {
      this.loadProduct();
      this.loadProductCategoryList()
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
    filters: {},
    methods: {
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 400//减去页面上固定高度height
      },
      resetClick(){
        this.productName=''
        this.sn=''
        this.loadProduct()
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.curHeight = h - 400//减去页面上固定高度height
          })();
        };
      },
      //供应商list
      loadProduct() {
        var _this = this
        let params = new URLSearchParams();
        if (!util.isNull(this.sn)){
          params.append('phone',this.sn)
        }
        if (!util.isNull(this.productName)){
          params.append('name',this.productName)
        }

        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('supplierCategoryId', _this.productCategory);
        list(params).then(response => {
          console.log(response)
          _this.productData = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      queryClick() {
        this.queryClicked=true
        setTimeout(()=>{
          this.queryClicked=false
        },300)
        this.loadProduct()
      },
      //商品分类list
      loadProductCategoryList() {
        var _this = this
        let params = new URLSearchParams();
        supplierCategoryList(params).then(response => {
          console.log(response)
          _this.data = response.data
          let tree={
            id:'',
            name:'所有分类'
          }
          _this.data.unshift(tree)
        }).catch(error => {
          console.log('error!!')
        });
      },
      //过滤商品
      handleNodeClick(data) {
        this.productCategory = data.id
        this.loadProduct()
      },
      //选择商品
      handleSelectionChange(val) {
        console.log(val)
        this.chooseData = val
      },
      //切换分页保留选择
      getRowKeys(row) {
        return row.id
      },
      //双击添加商品
      doubleClick(val) {
        this.$emit('doubleSupplier', val)
      },
      //关闭删除选择
      cancelClick() {
        this.$refs.table.clearSelection()
      },
      //选择添加商品
      addClick() {
        this.$emit('addClick', this.chooseData)
        this.$emit('orderClose')
      }
    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
  }
</style>
